<script setup>
import BooleanNodeDrag from './BooleanNodeDrag.vue';
import CommonNodeDrag from './CommonNodeDrag.vue';
import ForNodeDrag from './ForNodeDrag.vue';
import GroupNodeDrag from './GroupNodeDrag.vue';
import IteratorNodeDrag from './IteratorNodeDrag.vue';
import SwitchNodeDrag from './SwitchNodeDrag.vue';
</script>

<template>
  <aside class="ivy-aside-scrollbar" style="overflow: hidden auto;min-inline-size: 190px;user-select:none">
    <vs-collapse type="margin" class="ivy-collapse">
      <vs-collapse-item open>
       <template #header>
         <div>
          组件
         </div>
       </template>
       <span style="padding-block-end: 8px;">
        <CommonNodeDrag />
        <SwitchNodeDrag />
        <BooleanNodeDrag />
        <ForNodeDrag />
        <IteratorNodeDrag />
       </span>
     </vs-collapse-item>
     <vs-collapse-item open>
       <template #header>
         <div>
          分组
         </div>
       </template>
       <span style="padding-block-end: 8px;">
        <GroupNodeDrag />
       </span>
     </vs-collapse-item>
     <vs-collapse-item open>
       <template #header>
         <div>
          自定义组件
         </div>
       </template>
       <span style="padding-block-end: 8px;">
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
        <CommonNodeDrag />
       </span>
     </vs-collapse-item>
    </vs-collapse>
  </aside>
</template>

<style scoped>
.ivy-collapse{
  padding: 0 !important;
}

.ivy-collapse .vs-collapse-item{
  margin: 0 !important;
  background-color: transparent;
  box-shadow: none;
}



/* 只针对具有ivy-aside-scrollbar类的元素的滚动条宽度 */
.ivy-aside-scrollbar::-webkit-scrollbar {
  inline-size: 0;
}

</style>
